<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="70vw"
    top="8vh"
    @close="closeDialog()"
  >
    <div class="mod-config">
    <div class="btnBox">
      <div>
        <el-button
          type="primary"
          @click="addPerson()">
          新增</el-button>
        <el-button
          type="danger"
          :disabled="canDelete"
          @click="deleteBatch">
          删除</el-button>
      </div>
      <div>
        <el-button
          type="primary"
          @click="editBatch('sjkh')">
          分管领导批量编辑</el-button>
      </div>
    </div>
    <el-table
        style="width: 100%; margin-top: 20px"
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="handleSelectionChange"
        ref="table2"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
        <el-table-column prop="ygbm" align="center" min-width="100" label="员工编号" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="ygname" align="center"  label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deptName" align="center"  label="部门" show-overflow-tooltip></el-table-column>
        <el-table-column prop="spusernames" align="center"  label="分管领导" show-overflow-tooltip>
          <template slot-scope="scope">
                  <span
                    v-if="scope.row.spusernames"
                    @click="editRow(scope.row)"
                    style="color:rgb(14, 37, 140);cursor:pointer"
                  >{{scope.row.spusernames}}</span>
                  <i v-else class="el-icon-edit"  style="color:rgb(14, 37, 140);cursor:pointer" @click="editRow(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
      <UserCommonSelect v-if="usercomment" ref="usercomment" @submitfy="submitfy"></UserCommonSelect>
  </div>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="closeDialog()">返回</el-button>
        <el-button  type="primary" plain @click="saveFormData">确定</el-button>
      </span>
  </el-dialog>
</template>

<script>

import UserCommonSelect from "./usercomment-add";//人员选择的组件
import {addUserAndApprover,} from "@/api/statisticsanalysis/secLeaderManage";
import { validatenull } from "@/util/validate"; //判断空
import { mapGetters} from "vuex";
import store from "@/store";
export default {
  name: "",
  components: {
      UserCommonSelect
  },
  data() {
    return {
      headers: {Authorization: "Bearer " + store.getters.access_token},
      dialogTitle:'新增',
      visible:false,
      multipleSelection:[],
      dataList: [],
      dataListLoading: false,
      usercomment: false, //人员选择显隐
      fullscreenLoading:false,
      canDelete: true, //是否能删除
    };
  },
  computed: {
      ...mapGetters(["permissions"])
  },
  watch: {
      // 监听指标选中变化
      multipleSelection: {
          handler(val) {
              if (val.length !== 0) {
                  this.canDelete = false;
              } else {
                  this.canDelete = true;
              }
          },
          deep: true
      },
  },
  created() {
  },
  methods: {
    init(row, type) {
      this.visible  = true ;
    },
    // 勾选数据
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },

    //新增人员
    addPerson() {
        var data = [];
        data = this.$refs.table2.selection;

        let backPersons = this.backPersonData(this.dataList) ;
        this.usercomment = true;
        this.$nextTick(() => {
            this.$refs.usercomment.init({}, "sjkh", JSON.stringify(backPersons),false);  //false 表示选择非审批人，即选择领导用户
        });

    },
      //回传的人员数据
      backPersonData(arr){
          let backPersons = [] ;
          arr.map(it=>{
              if (it){
                  let obj = {
                      userId: it.ygid,
                      userName: it.ygname,
                      deptId: it.deptId,
                      deptName: it.deptName,
                      userCode: it.ygbm,
                      spusernames:it.spusernames,
                      approverList:it.approverList
                  };
                  backPersons.push(obj) ;
              }
          })

          return backPersons ;
      } ,
      //批量编辑
      editBatch() {
          let data =  this.$refs.table2.selection;
          if (data.length == 0) {
              this.$message.closeAll();
              this.$message.error("请至少选择一个！");
              return;
          }
          this.usercomment = true;
          this.$nextTick(() => {
              this.$refs.usercomment.init({}, "sjkh", JSON.stringify([]),true);//true 表示选择审批人
          });
    },
    //单行编辑
    editRow(row) {

       let arr = [] ;
       arr.push(row);

        if (arr[0].approverList){ //如果已有审批人集合，重构格式
            arr[0].approverList = this.backPersonData(arr[0].approverList) ;
        }

        this.usercomment = true;
        this.$nextTick(() => {
            this.$refs.usercomment.init({}, "sjkh", JSON.stringify(arr),true,'editRow');//true 表示选择审批人
        });
     },
    //选择人后
    submitfy(data) {

        //返回来选中的人员信息
        let users = [] ;
        let _this = this ;
        data.tableDataUser.map(it => {
            let obj = {
                ygid: it.userId, //员工id
                ygname: it.userName, //姓名
                deptId: it.deptId, //部门id
                deptName: it.deptName, //部门名称
                ygbm: it.userCode, //员工编号
                spusernames:it.spusernames, //审批人字符串
                approverList:it.approverList //审批人集合
            };
            users.push(obj);
        });


        if (data.isApprover){ //审批人

              //获取审批人字符串
              let spusernames = users.map(it=>{
                 return it.ygname  ;
              })

              if(data.isEditRow == 'editRow'){ //修改单条审批人
                  this.dataList.map(it=>{
                          if (it.ygid == data.ygid){
                              this.$set(it, "spusernames", spusernames.toString());
                              this.$set(it, "approverList", users);
                          }
                  })
              }else{//修改多条审批人
                  this.dataList.map(it=>{
                      _this.multipleSelection.map(itt => {
                          if (it.ygid == itt.ygid){
                              this.$set(it, "spusernames", spusernames.toString());
                              this.$set(it, "approverList", users);
                          }
                      })
                  })
              }

      }else{ //人员
          this.dataList = users ;
      }

    },
    //修改页面删除列
    deleteBatch() {
          let tempArr = [];
          this.dataList = this.dataList.filter(itt => {
              let tem = this.multipleSelection.filter(it => {
                  return itt.ygid == it.ygid;
              });
              return tem.length == 0;
          });
    },


    closeDialog() {
        this.visible = false;
        this.dataList = [] ;
        this.$emit("closeDialog");
    },
    //保存
    saveFormData() {
          // 新增
              this.fullscreenLoading = true;
              addUserAndApprover(this.dataList).then(r => {
                  if (r.data.code == 0) {
                      //this.isSubmit = false;
                      this.fullscreenLoading = false;
                      this.$emit("refreshDataList");
                      this.closeDialog();
                      this.$message.success("新增成功");
                  }
              }).catch(() => {
                      this.fullscreenLoading = false;
              })
      }
  },
};
</script>

<style lang="scss" scoped>
 .mod-config{padding: 20px!important;box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;}
 .btnBox{display: flex!important;justify-content: space-between;padding-bottom: 10px!important;border-bottom:1px solid rgb(176, 189, 226)!important }
</style>
